<template>
<l-layout class="l-tab-page">
    <l-panel>
        <template #toolRight >
            <l-tool-btns @click="handleAdd()" :hasAdd="!loginInfo.tenantName" >
                <l-excel-btns></l-excel-btns>
            </l-tool-btns>
        </template>
        <l-table 
            :loading="tableLoading"
            :columns="lr_getPageColumns(columns)" 
            :dataSource="tableData" 
            rowKey="f_AreaId"
            :lazy="true"
            :load="load"
            isTree
            >
            <template v-slot:f_EnabledMark="scope" >
                <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    :disabled="loginInfo.tenantName"
                    v-model="scope.row.f_EnabledMark"
                    @change="handleEnableChange(scope.row)"
                    >
                </el-switch>
            </template>
            <l-table-btns v-if="!loginInfo.tenantName" :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
        </l-table>
    </l-panel>
    <l-dialog  
        :height="360"
        :width="480"
        :title="formTitle"
        :visible.sync="formVisible"
        @ok="handleSave"
        @close="handleCloseForm"
        @opened="handleOpenedForm"
        >
        <my-form ref="form" ></my-form>
    </l-dialog>
</l-layout>
</template>

<script>
import MyForm from './form'
export default {
    inject: ["admin"],
    components: {
        MyForm
    },
    props: {
    },
    data () {
        return {
            lr_isPage:true,

            columns: [
                {label:'名称',prop:'f_AreaName',minWidth:'100'},
                {label:'编号',prop:'f_AreaCode',width:'100'},
                {label:'状态',prop:'f_EnabledMark',width:'64',align:'center'}
            ],
            tableBtns:[
                {prop:'Edit',label:'编辑',width:40},
                {prop:'Delete',label:'删除',width:40}
            ],
            tableLoading:false,
            tableData: [],

            formTitle:'',
            formVisible:false,
            formEditRow:null,
            formEdit:false
        };
    },

    computed:{
    },
    mounted () {
        this.loadTableData()
        /*for(let i=0;i<100;i++){
            this.test()
        }*/
    },
    methods:{
        /*async test(){
            const list = await this.lr_loadAreas('0',false)
            console.log(list[0].f_AreaCode)
        },*/
        async loadTableData(){
            this.tableLoading = true
            await this.lr_loadAreas('0',false)
            this.tableData = this.lr_areas['0']
            console.log(this.tableData);
            this.tableLoading = false
        },
        async load({row}){
            await this.lr_loadAreas(row.f_AreaId,false)
            return this.lr_areas[row.f_AreaId]
        },

        handleEnableChange(row){
            this.$store.dispatch("data/area/update",{id:row.f_AreaId,formData:this.$deepClone(row)}).then(()=> {
                this.$message({
                    type: 'success',
                    message: '更新成功!'
                })
            })
        },
        handleAdd(){
            this.formEdit = false
            this.showForm('新增区域')
        },
        handleEdit($index,row){  
            this.formEdit = true
            this.formEditRow = row
            this.showForm('编辑区域')
        },
        handleDelete($index,row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await this.lr_loadAreas(row.f_AreaId,false)
                if(this.lr_areas[row.f_AreaId].length > 0){
                    this.$message({
                        type: 'info',
                        message: '有子节点无法删除'
                    })       
                    return
                }

                this.$store.dispatch("data/area/remove",{id:row.f_AreaId,pid:row.f_ParentId}).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.admin.reload()
                })

                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })          
            })
        },
        handleSave(showLoading,hideLoading){
            this.$refs.form.validateForm(()=>{
                showLoading();
                let formData = this.$refs.form.getForm()
                if(this.formEdit){// 修改数据
                    this.$store.dispatch("data/area/update",{id:this.formEditRow.f_AreaId,formData:formData,oldPid:this.formEditRow.f_ParentId}).then(()=> {
                        hideLoading()

                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: '更新成功!'
                        })

                        this.admin.reload()
                    }).catch(() => {
                        hideLoading()
                    })
                }
                else{// 新增数据
                    this.$store.dispatch("data/area/add",formData).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: '新增成功!'
                        })
                        this.admin.reload()
                    }).catch(() => {
                        hideLoading()
                    })
                }
            });
        },
        handleOpenedForm(){
            if(this.formEdit){
                this.$refs.form.setForm(this.formEditRow)
            }
        },
        handleCloseForm(){
            this.$refs.form.resetForm()
        },
        showForm(text){
            this.formTitle = text
            this.formVisible = true
        }
    }
}
</script>